
<template>
<scroll-view 
     class="scroll-y" 
     scroll-y
     @scrolltolower="scrolltolower">

        <view class="shop-index" v-if="Object.keys(beautyInfo).length">

                <view class="cosmetology-info">
                       <image src="/static/images/phone_icon.png" class="phone" @tap="callPhone"/>
                       <view class="share">
                            <button v-if="userId"  open-type="share" hover-class="none" type="default" size="default" ></button>
                            <button v-else @tap="toLogin"  hover-class="none" type="default" size="default" ></button>
                            <image src="/static/images/share_icon_on.png" />
                        </view>     
                        
                         <view class="shop-info">
                                        <view class="n">{{beautyInfo.salonName}}</view>
                                        <view class="a" @tap="routePlan"  v-if="beautyInfo.salonAddress" >
                                            <image src="/static/images/meiye_address.png" />
                                            {{beautyInfo.salonAddress}}
                                            <text class="distance" v-if="beautyInfo.distance" >{{beautyInfo.distance}}</text>
                                        </view>
                                         <view class="a" >
                                            <image src="/static/images/clock-icon.png" />
                                            周{{beautyInfo.businessDay}} {{beautyInfo.businessTime}}
                                            <!-- <text class="t">{{beautyInfo.businessBrand}}</text>  -->
                                        </view>
                        </view>

                        <view :class="[isShow?'shop-introduce show-shop-introduce':'shop-introduce']" v-if="beautyInfo.businessBrand.length">
                                <view class="title">品牌介绍</view>
                                <view class="content">  <rich-text :nodes="beautyInfo.businessBrand"></rich-text></view>
                        </view>
                        <view v-if="beautyInfo.businessBrand.length" :class="[isShow?'handle-shop-introduce show-shop-introduce':'handle-shop-introduce']" @tap="showIntro">
                            <image src="/static/images/allow-down1.png" class="icon" />
                        </view>
                </view> 




            <Focus :images="shopBanner" v-if="shopBanner.length"/>
            
            <view class="cosmetology-group">
                
                <view class="cosmetology-title">
                        热卖商品
                        <view class="horizontal2vertical">
                                    <view class="item" @tap="handlehorizontal2vertical(1)">
                                        <image :src="horizontal2vertical == 1 ? '/static/images/vertical-on-icon.png':'/static/images/vertical-off-icon.png'" />
                                    </view>
                                    <view class="item"  @tap="handlehorizontal2vertical(2)">
                                        <image :src="horizontal2vertical == 2 ? '/static/images/horizontal-on-icon.png':'/static/images/horizontal-off-icon.png'"/>
                                    </view>
                        </view>
                </view>
                
                <view :class="horizontal2vertical == 1 ? 'cosmetology-list':'cosmetology-list horizontal'">
                        
                            <CosmetologyCard  v-for="(item,index) in skincarelist" :key="index" :item="item" class="beautycard"/>
                        
                </view>    
            </view>

            <PageBottom :LoadingType="loadingType" />


    </view>
</scroll-view>
</template>

<script lang="ts">

  import {Vue, Component, Prop} from 'vue-property-decorator';
  import {
           postSkincareCardAll,
           postSalonDetails,
           postMeiyeshare,
           postfreshFocus,
           postSelectBanner
        } from '@/request/actions';

 import CosmetologyCard from '@components/myBigCard/index.vue';
 import PageBottom from '@components/pageBottom/index.vue';
 import Focus from './_components/focus.vue'


 


 @Component({
      components:{
        CosmetologyCard,
        PageBottom,
        Focus
     
    }
 })
 export default class extends Vue {
   
            skincarelist:Array<any> = []
            beautyInfo:any = {};
            banner:string = "";
            shopPic:string = "";
            salonId:string|number = '';
            loadingType:string|number ='none';
            userId:string|number ='';
            page:number = 1;
            limit:string|number =8;
            bStop:boolean | string= true;
            isShow:boolean = false;
            horizontal2vertical:number = 1;
            shopBanner:Array<any> =[];
        
        showIntro(){
            this.isShow = !this.isShow;
      
        }
       routePlan(){
                 let plugin:any = requirePlugin('routePlan');
                 let key = 'J5JBZ-Y2O3S-XKIOV-6Z54I-ENCGF-QQBI4';  
                 let referer = '未来商城'; 
                 let {latitude,longitude,salonAddress:name}= this.beautyInfo;

                 let endPoint = JSON.stringify({  
                        name,
                        latitude,
                        longitude
                      });
             
                uni.navigateTo({
                        url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${endPoint}`
                });
            }

      returnPage(){
        let pages:Array<any> = getCurrentPages();
        if(pages.length < 2){
           uni.reLaunch({
              url:'/pages/home/index'
            })
        }else{
               uni.navigateBack()
        }
      
          
      }
        handlehorizontal2vertical(idx:number){
                this.horizontal2vertical = idx;
        }
        scrolltolower(){
              this.page++;
              if(!this.bStop) return;
              this.bStop = false;
              this.skincareCardAll();
        }
        toLogin(){
            return uni.showModal({
                        content:'请先登录',
                        success:(res:any)=>{
                            if (res.confirm) {
                                uni.navigateTo({
                                    url: '/pages/login/index'
                                });
                            }
                        }

                })
        }
        skincareCardAll(){

            let page = this.page;
            let limit = this.limit;
            let salonId = this.salonId;
            uni.showLoading();
            postSkincareCardAll({limit,page,salonId}).then((r:any)=>{
                let { data:res } = r;
                
                if(res.status == 200){
                    this.skincarelist.push(...res.data.stulist);
                    this.bStop = res.data.stulist.length < limit ?  false : true;

                        if(res.data.total == 0){
                            this.loadingType = 0;
                        }else if(res.data.total == this.skincarelist.length){
                            this.loadingType = 1;

                        }
                    
                }
                
                uni.hideLoading();
            
            })
        }
    

 
    callPhone(){

        uni.makePhoneCall({
            phoneNumber: this.beautyInfo.salonPhone
        });
    }

    onLoad(query:any){

        let {id,shareUserId} = query;
        let globalData = getApp().globalData;


        this.salonId = query.salonId;     
        if(shareUserId){
                let {query} = globalData;
                globalData.query = {...query,shareUserId};
            }


        let province = '';
        let city = '';
        let district = '';
        let startPoint:any = uni.getStorageSync('startPoint');
        let salonId = this.salonId;
        this.page = 1;
        this.bStop = true;
        this.skincarelist = [];

       
        if(startPoint.length > 0){
        
            let startPointObject = JSON.parse(startPoint);
            var  {address_component,lat,lng } = startPointObject;
            ({province:province,city:city,district:district} = address_component); 

        }
        

        

        
        this.skincareCardAll();
        postSalonDetails({salonId,lat,lng}).then((r:any)=>{
              let { data:res } = r;
              if(res.status == 200){
            
                   this.beautyInfo = res.data.stulist;
                      
                   this.banner = this.beautyInfo.salonDetailedphotos;
                  

                   uni.setNavigationBarTitle({
                        title: this.beautyInfo.salonName
                    });

                   uni.setNavigationBarColor({
                       frontColor: '#000000',
                       backgroundColor:"#"+this.beautyInfo.salonDetailedphotos
                   })
                   this.shopPic = this.beautyInfo.salonPicture;
                   
              }
        })

  
        postSelectBanner({salonId}).then((r:any)=>{

              

                let {data:res} = r;
                if(res.status == 200){
                    this.shopBanner = res.data;
                  
                }
        })




          


  
    }
   
  onShow(){
    
       
        let globalData = getApp().globalData;
        let {userId} = globalData.userInfo;
        this.userId = userId || '';


                 

                  
          

       
   }

    onShareAppMessage(){
            
            let globalData = getApp().globalData;
            let title = this.beautyInfo.salonName;
            let {userId} = globalData.userInfo;
            let pages = getCurrentPages();
            let path = pages[pages.length - 1].route;
            let salonId = this.salonId;
           

           
            postMeiyeshare({
                userId,
                shareId:salonId
            })

            return {
                title,
                path: `${path}?shareUserId=${userId}&salonId=${salonId}`//转发的路径
              
          }

        }

     
  

  }
</script>
<style lang="scss">
  @import './_static/scss/index.scss';

  navigator{
    position: relative;
    z-index: 2;
  }
  scroll-view{
    height: 100vh;
  }
</style>